$svg_love: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cpath d='M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z'%3E%3C/path%3E %3C/svg%3E");
$svg_star: url("data:image/svg+xml,%3Csvg width='96' height='91' viewBox='0 0 96 91' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48 0l11.226 34.55h36.327l-29.39 21.352L77.39 90.45 48 69.098 18.61 90.451 29.837 55.9.447 34.55h36.327L48 0z' fill='%23C4C4C4'/%3E%3C/svg%3E");
$svg_circle: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='25' r='25' fill='%23C4C4C4'/%3E%3C/svg%3E");

@mixin hellowOut($svg: $svg_love, $size: 100px, $x: 0.5, $y: 0.5) {
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    mask: $svg, linear-gradient(red, red);
    mask-size: $size, 100%;
    mask-repeat: no-repeat;
    mask-composite: exclude;
    mask-position: calc($x * 100% + $x * $size - 0.5 * $size)
        calc($y * 100% + $y * $size - 0.5 * $size),
      0;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
  }
}
